import { StyleSheet, Text, View, Image, Button, TouchableHighlight } from 'react-native'
import React, { useEffect, useState } from 'react'
import { useSearchParams } from 'expo-router/build/hooks'
import { getItem } from './services/hotTrack.d'
import { useRouter } from 'expo-router'

import * as SecureStore from 'expo-secure-store';
const doctorDetail = () => {
  const [_id, mingname] = useSearchParams()
  const router = useRouter()
  interface Item {
    _id: string,
    img: string,
    mingname: string,
    mingarea: string,
    mingphone: string,
    hospital: string,
    department: string,
    job: string,
    number: number,
    expert: object
  }
  const [itemOne, setItemOne] = useState<Item>({
    _id: '',
    img: '',
    mingname: '',
    mingarea: '',
    mingphone: '',
    hospital: '',
    department: '',
    job: '',
    number: 0,
    expert: {}
  })

  const [user, setUser] = useState([])
  // 存储
  const saveSecureData = async (key: string, value: string) => {
    await SecureStore.setItemAsync(key, value);
  };

  // 读取
  const getSecureData = async (key: string) => {
    return await SecureStore.getItemAsync(key);
  };

  const getDetail = async () => {
    let res: any = await getItem({ _id: _id[1] })
    setItemOne(res.data.item)
  }

  useEffect(() => {
    getDetail()
  }, [])
  const gotoDetails = () => {
    router.push({
      pathname: '/zhcFile/doctorDetails',
      params: {
        _id: itemOne._id,
        mingname: itemOne.mingname
      }
    })
  }
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <View style={styles.box}>
          <View style={styles.boxLeft}>
            <Image
              source={{ uri: itemOne.img }} //图片地址
              style={styles.img}
            >
            </Image>
          </View>
          <View style={styles.boxRight}>
            <Text style={{ textAlign: 'center', fontSize: 20, fontWeight: 'bold', marginTop: 10 }}>{itemOne.mingname}</Text>
            <View style={styles.jobHos}>
              <View style={{ width: '80%', height: 40, justifyContent: 'space-between', alignItems: 'center' }}>
                <Text>{itemOne.job}</Text>
                <Text>
                  {itemOne.hospital} {itemOne.department}
                </Text>
              </View>
              <TouchableHighlight onPress={() => { gotoDetails() }}>
                <View>
                  <Image
                    source={require('../../assets/images/right.png')}
                    style={{ width: 30, height: 30, marginLeft: -50 }}
                  >
                  </Image>
                </View>
              </TouchableHighlight>
            </View>
            {
              user ? <View style={{ width: 60, height: 40, marginTop: 20, marginLeft: 110 }}>
                <Button title='+关注'></Button>
              </View> : <View style={{ width: 60, height: 40, marginTop: 20, marginLeft: 110 }}>
                <Button title='已关注'></Button>
              </View>
            }
            <View style={{ width: 60, height: 40, marginTop: 20, marginLeft: 110 }}>
              <Button title='+关注'></Button>
            </View>
          </View>
        </View>
      </View>
      <View></View>
      <View>
        <View style={styles.center}>
          <View style={styles.centerLeft}>
            <Text>
              {itemOne.number}
            </Text>
            <Text>
              已学
            </Text>
          </View>
          <View style={styles.centerRight}>
            <Text>
              {itemOne.number}
            </Text>
            <Text>
              已学
            </Text>
          </View>
        </View>
        <View style={styles.news}>
          <Text>
            新课上线
          </Text>
        </View>
      </View>

    </View>
  )
}

export default doctorDetail

const styles = StyleSheet.create({
  container: {
    width: '100%',
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    width: '100%',
    height: 180,
    backgroundColor: 'blue',
  },
  box: {
    width: '90%',
    height: 160,
    marginLeft: '5%',
    boxSizing: 'border-box',
    backgroundColor: 'white',
    marginTop: 40,
    display: 'flex',
    flexDirection: 'row',
    borderRadius: 10,
  },
  boxLeft: {
    width: '40%',
    height: '100%',
  },
  img: {
    width: '100%',
    height: '80%',
  },
  boxRight: {
    width: '60%',
    height: '100%',
  },
  jobHos: {
    marginTop: 10,
    width: '100%',
    height: 50,
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
  },
  center: {
    width: '100%',
    height: 60,
    marginTop: 30,
    backgroundColor: 'white',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  centerLeft: {
    width: '45%',
    height: '50%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  centerRight: {
    width: '45%',
    height: '50%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  news: {
    width: '100%',
    height: 200,
    marginTop: 10,
    backgroundColor: 'white',
    padding: 10,
    boxSizing: 'border-box',
  }
})